<template>
    <van-sticky>
        <header class="login-nav">
                <div class="login-nav-container">
                    <!-- 左部分 -->
                    <div class="login-nav-left" @click="toHome">
                        <van-icon name="wap-home-o" size="0.64rem" />
                    </div>
                    <!-- 中间 -->
                    <slot></slot>

                    <div class="login-nav-center">
                    </div>
                    <!-- 右侧 -->
                    <div class="login-nav-right">
                        <van-icon name="search" size="0.64rem" @click="toSearch"></van-icon>
                        <van-icon name="shopping-cart-o" size="0.64rem" style="margin-left: 20px;" @click="toCart"></van-icon>
                    </div>
                </div>
            </header>
    </van-sticky>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
const router = useRouter();


//回首页
function toHome(){
    router.push('/home')

}
//购物车
function toCart(){
    router.push('/cart')

}

function toSearch() {
    router.push('/search')
}
</script>

<style scoped lang="less">


.login-nav {
    width: 100%;

    .login-nav-container {
        width: 351px;
        height: 50px;
        padding: 0 12px;
        background: #fafafa;
        line-height: 50px;
        position: relative;

        .login-nav-left {
            float: left;
        }
        .login-nav-right {
            float: right;
            padding-left: 20px;
            height: 44px;
            line-height: 44px;

        }
    }

}
</style>